<template>
    <div class="h-6">
    <el-menu-item index="/homePage">
        工作台
    </el-menu-item>
    <el-sub-menu index="2">
        <template #title><span style="font-size: 18px;font-weight:bold;">Workspace</span></template>
        <el-menu-item index="2-1">item one</el-menu-item>
        <el-menu-item index="2-2">item two</el-menu-item>
        <el-menu-item index="2-3">item three</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="/homes">homes</el-menu-item>
    <el-menu-item index="4">{{account}}</el-menu-item>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { accountStore } from '@/store/modules/user'

let account =ref(accountStore().account)
</script>
<style scoped>
div{
    display: flex;
}
.el-menu-item {
    display: flex;
    align-items: center;
    height: var(--el-menu-item-height);
    line-height: var(--el-menu-item-height);
    font-size: 18px;
    font-weight:bold;
    color: var(--el-menu-text-color);
    padding: 0 var(--el-menu-base-level-padding);
    list-style: none;
    cursor: pointer;
    position: relative;
    transition: border-color var(--el-transition-duration),background-color var(--el-transition-duration),color var(--el-transition-duration);
    box-sizing: border-box;
    white-space: nowrap;
}
.el-sub-menu__title {
    display: flex;
    align-items: center;
    height: var(--el-menu-item-height);
    line-height: var(--el-menu-item-height);
    font-size: 18px;
    font-weight:bold;
    color: var(--el-menu-text-color);
    padding: 0 var(--el-menu-base-level-padding);
    list-style: none;
    cursor: pointer;
    position: relative;
    transition: border-color var(--el-transition-duration),background-color var(--el-transition-duration),color var(--el-transition-duration);
    box-sizing: border-box;
    white-space: nowrap;
    padding-right: calc(var(--el-menu-base-level-padding) + var(--el-menu-icon-width));
}
</style>